<template>
  <a-card title="弹出子表示例" :bordered="false">
    <!--
      【弹出子表大体思路】
      1. 必须要有 clickRowShowSubForm 属性，如果该属性设为false，那么就不会弹出子表
      2. 必须要有 subForm 插槽，用于规定弹出子表的内容
      3. highlightCurrentRow 属性可有可无，如果有则点击一行的时候，该行会背景色会常亮
    -->
    <!--
      【弹出详细信息大体思路】
      1. 必须要有 clickRowShowMainForm 属性，如果该属性设为false，那么就不会弹出详细信息
      2. 必须要有 mainForm 插槽，用于规定弹出的内容
    -->
    <JVxeTable
      toolbar
      rowNumber
      rowSelection
      highlightCurrentRow
      clickRowShowSubForm
      clickRowShowMainForm
      :height="750"
      :loading="loading"
      :columns="columns"
      :dataSource="dataSource"
      @details-confirm="handleDetailsConfirm"
    >
      <!-- 主表单 -->
      <template #mainForm="{ row }">
        <template v-if="row">
          <a-form ref="form2" :model="row" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-row :gutter="8">
              <a-col :span="8">
                <a-form-item label="ID" name="id">
                  <a-input v-model:value="row.id" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="序号" name="num">
                  <a-input v-model:value="row.num" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="船名" name="ship_name">
                  <a-input v-model:value="row.ship_name" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="呼叫" name="call">
                  <a-input v-model:value="row.call" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="长" name="len">
                  <a-input v-model:value="row.len" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="吨" name="ton">
                  <a-input v-model:value="row.ton" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="付款方" name="payer">
                  <a-input v-model:value="row.payer" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="数" name="count">
                  <a-input v-model:value="row.count" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="公司" name="company">
                  <a-input v-model:value="row.company" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="动向" name="trend">
                  <a-input v-model:value="row.trend" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </template>
      </template>

      <!-- 子表单 -->
      <template #subForm="{ row }">
        <template v-if="loadSubData(row)">
          <JVxeTable
            ref="subFormTable"
            height="auto"
            :max-height="350"
            :loading="subTable.loading"
            :columns="subTable.columns"
            :dataSource="subTable.dataSource"
          />
        </template>
      </template>
    </JVxeTable>
  </a-card>
</template>

<script lang="ts" setup>
  // 弹出子表示例
  import { reactive, ref } from "vue"
  import { defHttp } from "/@/utils/http/axios"
  import { JVxeColumn, JVxeTypes } from "/@/components/jeecg/JVxeTable/types"
  import { useMessage } from "/@/hooks/web/useMessage"

  const { createMessage } = useMessage()
  const loading = ref(false)
  const dataSource = ref([])
  const columns = ref<JVxeColumn[]>([
    { key: "num", title: "序号", width: "80px" },
    { key: "ship_name", title: "船名", width: "180px", type: JVxeTypes.input },
    { key: "call", title: "呼叫", width: "80px" },
    { key: "len", title: "长", width: "80px" },
    { key: "ton", title: "吨", width: "120px" },
    { key: "payer", title: "付款方", width: "120px" },
    { key: "count", title: "数", width: "40px" },
    {
      key: "company",
      title: "公司",
      minWidth: "180px",
      // 是否点击显示详细信息
      // 只有当前单元格不能编辑的时候才能生效
      // 如果不设的话，点击就只弹出子表，不会弹出主表的详细信息
      showDetails: true,
    },
    { key: "trend", title: "动向", width: "120px" },
  ])
  const selectedRows = ref([])
  // 子表的信息
  const subTable = reactive({
    currentRowId: null,
    loading: false,
    pagination: { current: 1, pageSize: 200, pageSizeOptions: ["100", "200"], total: 0 },
    selectedRows: [],
    dataSource: [],
    columns: [
      { key: "dd_num", title: "调度序号", width: "120px" },
      { key: "tug", title: "拖轮", width: "180px", type: JVxeTypes.input },
      { key: "work_start_time", title: "作业开始时间", width: "180px", type: JVxeTypes.input },
      { key: "work_stop_time", title: "作业结束时间", width: "180px", type: JVxeTypes.input },
      { key: "type", title: "船舶分类", width: "120px", type: JVxeTypes.input },
      { key: "port_area", title: "所属港区", minWidth: "120px", type: JVxeTypes.input },
    ] as JVxeColumn[],
  })

  // form表单 col
  const labelCol = reactive({ span: 4 })
  const wrapperCol = reactive({ span: 20 })
  const rules = reactive({
    num: [{ required: true, message: "必须输入序号" }],
  })

  // 查询url地址
  enum Api {
    getData = "/mock/vxe/getData",
  }

  loadData()

  // 加载数据
  function loadData() {
    // 封装查询条件
    // 调用查询数据接口
    loading.value = true
    defHttp
      .get({
        url: Api.getData,
        params: {
          pageNo: 1,
          pageSize: 30,
        },
      })
      .then((result) => {
        // 将查询的数据赋值给 dataSource
        dataSource.value = result.records
        // 重置选择
        selectedRows.value = []
      })
      .finally(() => {
        // 这里是无论成功或失败都会执行的方法，在这里关闭loading
        loading.value = false
      })
  }

  // 查询子表数据
  function loadSubData(row) {
    if (row) {
      // 这里一定要做限制，限制不能重复查询，否者会出现死循环
      if (subTable.currentRowId === row.id) {
        return true
      }
      subTable.currentRowId = row.id
      subTable.loading = true
      defHttp
        .get({
          url: Api.getData,
          params: {
            pageNo: 1,
            pageSize: 30,
            parentId: row.id,
          },
        })
        .then((result) => {
          // 将查询的数据赋值给 dataSource
          subTable.dataSource = result.records
        })
        .finally(() => {
          // 这里是无论成功或失败都会执行的方法，在这里关闭loading
          subTable.loading = false
        })
      return true
    } else {
      return false
    }
  }

  // 详细信息里点了确认按钮
  function handleDetailsConfirm({ row, $table, callback }) {
    console.log("保存的数据：", row)
    // 校验当前行
    $table.validate(row).then((errMap) => {
      // 校验通过
      if (!errMap) {
        // 校验子表，如果需要的话，可以操作下面这个对象：
        callback(true)
        loading.value = true
        setTimeout(() => {
          loading.value = false
          createMessage.success("保存成功")
        }, 1000)
      } else {
        callback(false)
        createMessage.warn("校验失败")
      }
    })
  }
</script>

<style scoped></style>
